<template>
  <div>
    <ul>
      <li v-for="(item,index) in historyList" :key="index">
        <p class="top_box">
          <span>
            <span style="color: #44bb56;margin-right: 20px;">
              {{ item.visitType === 1 ? '初诊' : '复诊' }}
            </span>

            <span>
              <span style="color: #af9faf;">
                时间：
              </span> {{ item.createDate }}
            </span>
          </span>
          <span class="right_box" @click="lookDetail(item)">
            详情 >
          </span>
        </p>
        <p class="two_box">
          <span class="left_box">
            诊断：
          </span>
          <span style="flex: 1;">
           {{ initToothPosition(item.dataList[0].toothPosition) }} {{ item.diagnosisTypeCn }}
          </span>
        </p>
        <p class="three_box">
          <span class="left_box">
            治疗计划：
          </span>
          <span style="flex: 1;">
            {{ initToothPosition(item.dataList[0].toothPosition) }} {{ item.treatment }}
          </span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import initName from '@/utils/initName.js';
export default {
  name: 'EitcErmPcHistory',
  mixins: [initName],

  props: {
    historyList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    lookDetail(val){
      this.$emit('lookDetail', val);
    },
  },
};
</script>

<style lang="scss" scoped>
  ul{
    padding-left: 0px;

    li {
      list-style: none;
      border: 2px solid #dbdbdb;
      padding: 0 10px;
      margin-bottom: 10px;

      .top_box {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 2px solid #dbdbdb;

        .right_box {
          color: #44bb56;
          font-family: serif;
          cursor: pointer;
        }
      }

      .two_box {
        display: flex;

        .left_box{
          width: 80px;
          color: #af9faf;
          text-align: right;
        }
      }

      .three_box {
        display: flex;

        .left_box{
          width: 80px;
          color: #af9faf;
          text-align: right;
        }
      }

    }
  }
</style>